Learn how to style images using CSS.

Use the border-radius property to create rounded images:

Rounded Image:

Circled Image:

Use the border property to create thumbnail images.

Thumbnail Image:

Thumbnail Image as Link:

img:hover {   box-shadow: 0 02px 1px rgba(0, 140, 186, 0.5);}

Responsive images will automatically adjust to fit the size of the screen.

Resize the browser window to see the effect:

If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:

Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.

To center an image, set left and right margin to auto and make it into a block element:

Cinque Terre

Northern Lights

img {width: 100%}

div.container {  text-align: center;  padding: 10px 20px;}

The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

opacity 0.2

opacity 0.5

opacity 1(default)

How to position text in an image:

Try it Yourself:

The CSS filter property adds visual effects (like blur and saturation) to an element.

Note: The filter property is not supported in Internet Explorer or Edge 12.

Change the color of all images to black and white (100% gray):

Tip: Go to our CSS filter Reference to learn more about CSS filters.

Create an overlay effect on hover:

Fade in text:

Fade in a box:

Slide in (top):

Slide in (bottom):

Slide in (left):

Slide in (right):

Move your mouse over the image:

CSS can be used to create image galleries. This example use media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect:

@media only screen and (max-width: 700px){  .responsive {    width: 49.99999%;    margin: 6px 0;  }}

@media only screen and (max-width: 500px){  .responsive {    width: 100%;   }}

Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.

This is an example to demonstrate how CSS and JavaScript can work together.

First, use CSS to create a modal window (dialog box), and hide it by default.

Then, use a JavaScript to show the modal window and to display the image inside the modal, when a user clicks on the image:

// Get the image and insert it inside the modal - use its "alt" text as a captionvar img = document.getElementById('myImg');var modalImg = document.getElementById("img01");var captionText = document.getElementById("caption");img.onclick = function(){  modal.style.display = "block";  modalImg.src = this.src;  captionText.innerHTML = this.alt;}

// Get the element that closes the modalvar span = document.getElementsByClassName("close")[0];

// When the user clicks on (x), close the modalspan.onclick = function() {   modal.style.display = "none";}